<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Large text selection drag and drop</title>
<style type="text/css">
textarea
  {width:300px;
  height:100px;
  margin-top:20px;
  padding:10px;}
</style>
<script type="application/ecmascript">
function start(event)
  {var p = document.querySelector('p:last-child'), s = p.firstChild.nodeValue;
  for(var i = 0; i != 12; i++)
    {s = s + ' ' + s;}
  p.firstChild.nodeValue = 'Start of selection. ' + s + ' End of selection';
  window.getSelection().selectAllChildren(p);}
</script>
</head>
<body onload="start()">
<p>Try to drag selection below to the textarea. Copy of selection should end up in the textarea once you drop it there.</p>
<p><textarea placeholder="Drop selection here"/></p>
<p>Large selection.</p>
</body>
</html>
